<template>
  <div>
    model
    <!-- <TabBar :active="active" @onChange="onChange"></TabBar>
    {{ inputVal }}
    <MyInput v-model="value" /> -->
    <MyInput v-model="value" />
    <van-button @click="show = true">点击弹出框</van-button>

    <MyTabBar v-model="active"></MyTabBar>

    <MyPopup v-model="show" />

    <van-button @click="onPercent">点击控制长度</van-button>

    <van-progress @resize="resize" :percentage="percent" stroke-width="8" />
  </div>
</template>

<script>
import TabBar from './components/TabBar.vue'
// active 在父组件中保存的一个数据
// 传递给了子组件，子组件通过v-model控制active
// v-model既可以获取，还能设置
// 违背了在子组件内部不能更改props的规则，（子组件只能接受props,不能修改props）
// 子组件控制val,把结果通报给父组件，让父组件去更改他自己的active(谁的数据谁负责)
import MyInput from './components/MyInput.vue'
// 通过v-model使用在自定义组件上，实现组件的封装
import MyTabBar from './components/MyTabBar.vue'
import MyPopup from './components/MyPopup.vue'
export default {
  components: { TabBar, MyInput, MyTabBar, MyPopup },
  data() {
    return {
      active: 0,
      inputVal: '',
      value: '',
      show: false,
      percent: 0,
    }
  },
  watch: {
    active(v) {
      console.log(v, 'v--------------我是父组件的active')
    },
    inputVal(v) {
      console.log('inputVal:', v)
    },
  },
  methods: {
    onPercent() {
      this.percent += 10
    },
    resize(v) {
      console.log(v, 'v')
      console.log(this.percent, '-------------')
    },
    // onChange(v) {
    //   // 父组件控制自己的数据
    //   this.active = v
    // },
  },
}
</script>

<style></style>
